<template>
  <div class="box">
    <header class="header">
      <van-nav-bar title="标题" left-text="返回" left-arrow @click-left="$router.back()" />
    </header>
    <main class="content">
      <van-swipe-cell v-for="item in store.cartList" :key="item.id">
        <van-card :num="item.count" :price="item.price"  :title="item.title" class="goods-card"
          :thumb="item.image" >
          <template #tag>
            <van-checkbox v-model="item.checked"></van-checkbox>
        </template>
        <template #footer>
          <van-stepper v-model="value" />

        </template>
          </van-card>
        <template #right>
          <van-button square text="删除" type="danger" @click="onDele(item.id)" class="delete-button" />
        </template>
      </van-swipe-cell>

    </main>
  </div>
  <footer>
    <van-submit-bar :price="store.totalPrice*100" button-text="提交订单" @click="$router.push('/order')"  @submit="onSubmit">
      <van-checkbox v-model="allChecked">全选</van-checkbox>

    </van-submit-bar>
  </footer>
</template>

<script setup>
import { useCounterStore } from '@/stores/counter'
// 可以在组件中的任意位置访问 `store` 变量 ✨
const store = useCounterStore()
import {computed,ref} from 'vue'
const allChecked=computed({
  get(){
    if(store.cartList.length==0){
      return false
    }else{
      return store.cartList.every(item=>item.checked==true)
       }
  },
  set(newValue){
    store.cartList.forEach(item=>item.checked=newValue)
  }
})
const onDele=(id)=>{
  store.delet(id)
}
// const allChecked=computed({
//   get(){
// if(store.cartList.length==0){
//   return false
// }else{
//   return store.cartList.every(item=>item.checked==true)

// }
//   },
//   set(newValue){
// store.cartList.forEach(item=>item.checked=newValue)
//   }
// })
// const onDele=(id)=>{
//   store.delet(id)
// }
</script>

<style lang="scss" scoped></style>